import { inject, observer } from 'mobx-react';
import React from 'react';
import appleImg from '../assets/apple.png';

@inject('appStore')
@observer
class App extends React.Component {
  
  render() {
    let {appleList, eatAppleList, currentWeight, eatWeight, eatApple, addApple } = this.props.appStore

    return (
      <div className="container">
      <div className="header">苹果篮子</div>
      <div className="number">
        <div className="current">
          <span className="current-title">当前</span>
          <div>{appleList.length}个苹果，{currentWeight}克</div>
        </div>
        <div className="done">
          <span className="current-title">已吃掉</span>
          <div>{eatAppleList.length}个苹果，{eatWeight}克</div>
        </div>
      </div>
      <div className="list">
        {
          appleList.map((item) => {
            return (
              <div className="list-item" key={item.id}>
                <div className="list-info">
                  <img className="img" src={appleImg} alt="apple" />
                  <div>
                    <div className="info-title">{item.name} + {item.id}号</div>
                    <div>{item.weight}克</div>
                  </div>
                </div>
                <button className="btn" onClick={() => { eatApple(item.id) }}>吃掉</button>
              </div>
            )
          })
        }
      </div>
      <div className="action">
        <button className="get-apple" onClick={addApple}>摘苹果</button>
      </div>
    </div>
    );
  };
}

export default App;
